<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      textarea {
        width: 300px;
        height: 30px;
        padding: 10px;
        border-color: transparent;
        outline: none;
        resize: none;
        background: #f5f5f5;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea>
  </body>
</html>
<script>
// 获取元素
const txt = document.querySelector('#tx')
// 1.键盘事件
// 1.1 键盘按下事件  keydown  当我们按下键盘的时候触发
    // 1.1 键盘按下事件  keydown  当我们按下键盘的时候就触发
    // tx.addEventListener('keydown', function() {
      // 按下事件触发时无法获取到最新的那一个字符
      // 原因: 按下后才会将字符输入到文本框中, 所以在按下时还未更新最新的数据
    //   console.log('我按下了!', tx.value)
    // })
    

// 1.2键盘弹起事件   keydown  当我们弹起键盘的时候触发
// txt.addEventListener('keyup',function(){
//     console.log('我弹起了',txt.value );
// })
// 2.用户输入事件    input  是表单value值发生变化的时候触发
txt.addEventListener('input',function () {
    console.log('input输入框了',txt.value);
  })
// 3.执行顺序






</script>
